<template>
  <div class="editWedding">
    <h1>视频信息</h1>
    <el-form ref="form" class="box" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="新娘名字:" label-width="120px" prop="girl">
        <el-input v-model="form.girl" @input="add(form)"></el-input>
      </el-form-item>

      <el-form-item label="新娘头像:" label-width="120px" prop="girlimagesrc">
        <template slot-scope="scope">
          <form class="banner_loade" enctype="multipart/form-data">
            <el-button class="upload" type="primary ">
              上传
              <input class="file" type="file" name="file" @change="uploadImg($event,1)" />
            </el-button>
            <div class="loade_img">
              <img class="img_auto" :src="form.girlimagesrc" alt />
            </div>
          </form>
        </template>
      </el-form-item>
      <el-form-item label="新郎名字:" label-width="120px" prop="man">
        <el-input v-model="form.man" @input="add(form)"></el-input>
      </el-form-item>

      <el-form-item label="新郎头像:" label-width="120px" prop="manimagesrc">
        <template slot-scope="scope">
          <form class="banner_loade" enctype="multipart/form-data">
            <el-button class="upload" type="primary ">
              上传
              <input class="file" type="file" name="file" @change="uploadImg($event,2)" />
            </el-button>
            <div class="loade_img">
              <img class="img_auto" :src="form.manimagesrc" alt />
            </div>
          </form>
        </template>
      </el-form-item>

      <el-form-item label="简介:" label-width="120px" prop="descript">
        <el-input type="textarea" @input="add(form)" autosize placeholder="请输入内容" v-model="form.descript">
        </el-input>
      </el-form-item>
    </el-form>
    <el-row style="margin-top:20px;">
      <el-button type="primary" @click="addvideo()">添加视频</el-button>
    </el-row>
    <!-- 直播 -->
    <template>
      <el-table :data="videoList" style="width: 100%">
        <el-table-column prop="id" label="ID" align="center" width="180">
        </el-table-column>
        <el-table-column prop="introduction" label="视频阶段" align="center" width="180">
        </el-table-column>
        <el-table-column prop="timenode" label="时间" align="center" width="180">
        </el-table-column>
        <el-table-column prop="address" align="center" width="300" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editorvideo(scope.$index)">编辑视频</el-button>
            <el-button type="primary" size="small" @click="deleteInfo(scope.$index,scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-row style="text-align: center; margin-top:20px;">
      <el-button type="button" @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveInfo(form)">提交</el-button>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        videoList: [],
        id: '',
        // 信息
        form: {
          girl: "",
          girlimagesrc: '',
          man: "",
          manimagesrc: '',
          descript: "",
          livetimes: "",
          userid: ''
        },

        // 视频
        changes: "",
        num: "1",
        tableData: [],
        rules: {
          girl: [{
            required: true,
            message: '请填写新娘名称',
            trigger: 'blur'
          }],
          girlimagesrc: [{
            required: true,
            message: '请上传新娘图片',
            trigger: 'blur'
          }],
          man: [{
            required: true,
            message: '请填写新郎名称',
            trigger: 'blur'
          }],
          manimagesrc: [{
            required: true,
            message: '请上传新郎图片',
            trigger: 'blur'
          }],
          descript: [{
            required: true,
            message: '简介信息',
            trigger: 'blur'
          }],
        },

      };
    },
    created() {
      this.id = this.$route.query.id;
      localStorage.liveid = this.id;
      let info = JSON.parse(localStorage.getItem('liveuser'))
      if (info && this.id == info.id) {
        this.$set(this.form, "descript", info.descript)
        this.$set(this.form, "girl", info.girl)
        this.$set(this.form, "girlimagesrc", info.girlimagesrc)
        this.$set(this.form, "man", info.man)
        this.$set(this.form, "manimagesrc", info.manimagesrc)
        this.api.get('/api/live?userid=' + this.$route.query.id, {}).then((res) => {
          if (res.code == 200) {
            this.videoList = res.data.timeaxis
          }
        })
      } else {
        this.api.get('/api/live?userid=' + this.$route.query.id, {}).then((res) => {
          if (res.code == 200) {
            this.$set(this.form, "descript", res.data.descript)
            this.$set(this.form, "girl", res.data.girl)
            this.$set(this.form, "girlimagesrc", res.data.girlimagesrc)
            this.$set(this.form, "man", res.data.man)
            this.$set(this.form, "manimagesrc", res.data.manimagesrc)
            this.videoList = res.data.timeaxis
            console.log(res.data)
          }
        })
      }

    },
    methods: {
      add(val) {
        let userInfo = val;
        this.$set(userInfo, 'id', this.id)
        localStorage.liveuser = JSON.stringify(userInfo)
      },
      // 添加视频
      addvideo() {
        console.log(this.$route.query.id, "aaaaaaa")
        this.$router.push({
          path: "/admin/mainstay/addvideo",
          query: {
            userid: this.$route.query.id
          }
        })
      },
      //编辑视频
      editorvideo(index) {
        let id = this.videoList[index].id
        this.$router.push({
          path: "/admin/mainstay/addvideo",
          query: {
            id: id,
            userid: this.$route.query.id
          }
        })
      },
      addLive() {
        //添加直播
        let item = {
          userid: '',
          timenode: '',
          timenode_detail: ''
        };
        this.videoList.push(item);
      },
      deleteInfo(index, id) { //删除直播
        this.videoList.splice(index, 1)
        this.api.get('/api/deletelive', {
          id: id
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          }
        })


      },
      // 图片上传
      uploadImg(e, index) {
        console.log(e);
        console.log(index, "索引");
        let file = e.target.files[0];
        let param = new FormData();
        param.append("files", file, file.name);
        console.log(param);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        this.api.post("/api/imgs", param, config).then(res => {
          if (index == 1) {
            this.$set(this.form, "girlimagesrc", res.data[0])
          }
          if (index == 2) {
            // this.manimagesrc = res.data[0];
            this.$set(this.form, "manimagesrc", res.data[0])
          }
          this.add(this.form)
        });
      },
      handleDelete(index) {
        //删除
        this.tableData.splice(index, 1);
      },
      editor(index) {
        this.tableData[index].changes = !this.tableData[index].changes;
      },
      preserve(index) {
        console.log("保存");
        this.tableData[index].changes = true;
      },
      // 提交数据
      saveInfo(form) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 获取用户ID
            let userid = this.$route.query.id;
            let addvideo = {
              descript: this.form.descript,
              girl: this.form.girl,
              girlimagesrc: this.form.girlimagesrc,
              man: this.form.man,
              manimagesrc: this.form.manimagesrc,
              userid: userid,
            }
            this.api.post('/api/addlive/', addvideo).then((res) => {
              console.log(res.data);
              if (res.code) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })

                localStorage.removeItem('user')
                setTimeout(() => {
                  this.$router.go(-1)
                }, 3000)
              }
            })

          }
        })

      },
      cancel() {
        this.$router.go(-1)
      }
    }
  };
</script>

<style scoped>
  .videos {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 20px 20px 0;
  }

  .box {
    width: 50%;
  }

  .addlive {
    width: 95%;
    border: 2px solid #ccc;
    height: auto;
    margin: 0 auto;
    display: flex;
    margin-bottom: 30px;
  }

  .num {
    flex: 1;
    padding: 20px;
    border-right: 2px solid #cccccc;
    text-align: center;
  }

  .num p {
    line-height: 200px;
  }

  .table {
    padding: 30px;
    flex: 9;
  }

  .add {
    margin-bottom: 30px;
  }

  .file {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    opacity: 0;
  }

  .el-button {
    width: 100px;
  }

  .banner_loade {
    height: 100px;
  }

  .loade_img {
    background: url("./../../../static/img/push.jpg") no-repeat;
    position: absolute;
    top: 0;
    background-size: 80px 80px;
    width: 80px;
    height: 80px;
    left: 130px;
  }

  .img_auto {
   max-width: 100%;
   width: 100%;
   max-height: 100%;
   height: 100%;
   object-fit: cover;
  }

  .upload {
    position: relative;
    width: 120px;
    height: 35px;
  }

  .modify_icon {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .modify_icon>i {
    font-size: 25px;
    padding: 5px;
    cursor: pointer;
  }

  .modify_icon>i:hover {
    background-color: #fff;
  }
</style>
<style>
  .el-popper {
    z-index: 100000 !important;
  }
</style>
